<template>
	<view>
		<view class="head">
		<view class="top">
		</view>
		<uni-card  style="position: relative; top: -40rpx;" spacing="5px">
				<map style="height: 70vh;width: auto;" :latitude="shopInfo1.latitude" :longitude="shopInfo1.longitude"
					:markers="markers"  @callouttap="callouttap"></map>
					<view class="bottom">
						<view class="bottomleft">
							<view>{{shopInfo1.storeName}}</view>
							<view>{{shopInfo1.address}}</view>
						</view>
						<view class="bottomright">
							<u-button shape="circle" customStyle="color:white;width:25vw;background-color: #0662E6;">导航</u-button>
						</view>
					</view>
			</uni-card>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				itemId:'',
				shopInfo1:{},
			longitude: '',
			latitude: '',
			markers: [{
				id: 1,
				width: 20,
				height: 30,
				longitude: 113.56045049999999,
				latitude: 34.814811999999996,
				iconPath: '/static/images/ls/椭圆 3 拷贝 2@3x.png',
				// title:"shopInfo1.storeName",
				callout: {
					content: '查看门店',
					bgColor: '#FC6330',
					color: '#fff',
					fontSize: 14,
					textAlign: 'center',
					display: 'ALWAYS',
					borderRadius: 25,
					padding: 10,
				},
			}]
			}
		},
		
		onLoad(option){
			this.itemId = option.id; // 从 URL 中获取 id 并赋值给 data 中的 itemId
			this.getList1(this.itemId);
		},
		methods: {
			
			
			callouttap() {
				uni.$u.route('/pages/ls/nearbyStores/nearbyStores');
				// console.log('附近门店');
			},
			
			//维修列表
			  getList1(id) {
			  		let that=this;
			  this.$http({
			  	url:`/api/shop/manage/${id}`,
			  	method:'GET',
			  	success(res){
			  		that.shopInfo1 = res.data.data;
			  		console.log(res);
			  		console.log("============")
			  		// console.log("repairInfo",this.repairInfo)
			  	}
			  })		
			},
			
		}
	}
</script>

<style>
	.bottomleft{
		margin-top: 2vh;
		text-align: left;
	}
	.bottomleft :nth-child(1){
		font-size: 3vh;
		margin-bottom: 1vh;
		font-weight: 600;
	}
	.bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top {
		background-color: #2F81FA;
		width: 100%;
		height: 20%;
		position: fixed;
		position: relative;
		text-align: center;
		padding-top: 4%;
		box-sizing: border-box;
	}

	.arrow {
		height: 28rpx;
		width: 28rpx;
		border-top: 4rpx solid white;
		border-right: 4rpx solid white;
		transform: rotate(225deg);
		position: absolute;
		left: 3%;
	}

	.head {
		position: relative;
		text-align: center;
		height: 35vh;
		width: 100%;
		background-color: #2F81FA;
	}
</style>
